<template>
  <div class="swiper" ref="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="banner in bannerList" :key="banner.id">
        <img :src="banner.imgUrl" :alt="`banner${banner.id}`" />
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
/*
  https://www.swiper.com.cn/usage/index.html

  1. 下载swiper
    npm i swiper
  2. 引入swiper js和css
  3. 准备swiper结构
  4. new Swiper生成轮播图
*/
import Swiper from "swiper/bundle";
import "swiper/css/bundle";

export default {
  name: "XCarousel",
  props: {
    bannerList: Array,
  },
  mounted() {},

  //  dom渲染都会先根据子组件mounted 后更新父组件的mounted
  //   数据更新是同步执行的，

  // 当bannerList() 的时候监听的时候，当复用组件传数据时，因为异步的数据，监视是空数组，没数据，
  // 获取到的数据时，就会被监视属性视为第一次的数据

  watch: {
    bannerList: {
      async handler(newVal) {
        // console.log(1122);
        if (!newVal.length) return;
        // $nextTick 当DOM 更新完毕后会更新后面的回调函数 ,把任务塞到异步队列里  $nextTick(()=>{})
        await this.$nextTick();

        // 必须保证：DOM元素生成好才能创建轮播图
        // 更多的swiper配置：https://www.swiper.com.cn/api/index.html

        new Swiper(this.$refs.swiper, {
          //选择器一般都可以使用dom元素,复用组件时，渲染的DOM元数都不相同
          autoplay: true, // 自动轮播
          // autoplay: {
          //   delay: 1000,
          // },
          loop: true, // 无限轮播
          // 小圆点
          pagination: {
            el: ".swiper-pagination",
            clickable: true, // 可以点击跳转
          },
          // 左右箭头
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
      },
      immediate: true, // DOM 加载时会触发一次，监视属性，一般一上来不会触发，当监视的属性值发生了改变才会触发
    },
  },
};
</script>

<style></style>
